import { useCallback, useContext, useEffect, useState } from "react";
import StudentList from "./components/StudentList";
import StuContext from "./store/StuContext";
import useFetch from "./hooks/useFetch";

const URL = 'http://localhost:1337/api/students'
function App() {
  //使用自定义钩子函数代替下面代码
  const { data: student, loading, errorMsg, fetchData } = useFetch({
    url:'students',
  })
  /*  代替的部分
  //存储数据
  const [student, setStudent] = useState([])
  //添加一个state来记录数据是否正在加载
  const [loading, setLoading] = useState(false)
  //创建一个state来记录是否数据请求失败
  const [errorMsg, setErrorMsg] = useState(null)
  // 发送请求函数
  const fetchData = useCallback(async () => {
    try {
      setLoading(true)
      setErrorMsg(null)
      const res = await fetch(URL)
      if (res.ok) {
        const { data, meta } = await res.json()
        setStudent(data)

        setLoading(false)
      } else {
        throw new Error('数据加载失败')
      }
    } catch (e) {
      setLoading(false)
      setErrorMsg(e.message)
    }
  }, [])
*/

  //单独使用fetch
  // useEffect(() => {
  //   //设置loading
  //   setLoading(true)
  //   //发送请求,fetch()需要两个参数，1.请求地址 2.请求信息 默认get请求
  //   // then()中的回调会在请求成功时调用
  //   //catch（）中的回调会在请求失败时调用
  //   fetch(URL)
  //     .then((response) => {
  //       if (response.ok) {
  //         return response.json()//该方法可以将响应的json直接转换为js对象，返回的是一个promise对象
  //       }

  //       //抛出一个错误
  //       throw new Error('数据加载失败')

  //     }).then(({ data, meta }) => {//将转换成的数据传入回调的第一个参数中
  //       //将数据存储
  //       setStudent(data)
  //       setLoading(false)

  //     })
  //     .catch((error) => {
  //       //代码运行到这，说明没有成功加载到数据
  //       setLoading(false)
  //       setErrorMsg(error.message)

  //     })
  // }, [])
  //结合await使用
  useEffect(() => {
    fetchData()
  }, [])

  const loadDataHandler = () => {
    fetchData()

  }
  return (
    <StuContext.Provider value={{ fetchData: fetchData }}>
      <div className="App">
        <button onClick={loadDataHandler}>加载数据</button>
        {(!loading && !errorMsg) && <StudentList studentList={student} />}
        {loading && <p>数据正在加载中.....</p>}
        {errorMsg && <p>{errorMsg}</p>}
      </div>
    </StuContext.Provider>

  );
}

export default App;
